<!--
 * @Author: wwssaabb
 * @Date: 2023-02-21 11:00:44
 * @LastEditTime: 2023-02-21 11:36:45
 * @FilePath: \Background blur\index.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href="./css/style.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <div class="container"></div>
    <script
      crossorigin="anonymous"
      integrity="sha512-E378bwaeZf1nwXeJGIwTB58A5gPt5jFU3u6aTGja4ZdRFJeo/N/REKnBgNZOZlH6JdnOPO98vg2AnSGaNfCMFQ=="
      src="https://lib.baomitu.com/animejs/3.2.1/anime.js"
    ></script>
    <script>
      const container_el = document.querySelector(".container");
      const fragment = new DocumentFragment();
      for (let i = 1; i <= 900; i++) {
        const dot_el = document.createElement("div");
        dot_el.classList.add("dot");
        fragment.appendChild(dot_el);
      }
      container_el.appendChild(fragment);

      const grid = [30, 30];
      let dotAll = document.querySelectorAll(".dot");
      //anime 设置动画
      const animation = anime.timeline({
        targets: dotAll,
        easing: "easeInOutExpo",
        loop: true,
      });
      const options = {
        rotate: () => anime.random(-360, 360),
        translateX: () => anime.random(-150, 150),
        translateY: () => anime.random(-150, 150),
        keyframes: [
          { background: "#f00" },
          { background: "#0f0" },
          { background: "#f0f" },
          { background: "#ff0" },
          { background: "#0ff" },
          { background: "#fff" },
          { background: "#333" },
        ],
      };

      animation
        .add({
          ...options,
          delay: anime.stagger(100, { grid }),
        })
        .add({
          ...options,
          rotate: () => anime.random(0, 0),
          translateX: () => anime.random(0, 0),
          translateY: () => anime.random(0, 0),
          delay: anime.stagger(100, { grid, from: "center" }),
        })
        .add({
          ...options,
          delay: anime.stagger(100, { grid, from: "last" }),
          // keyframes: [{ background: "#fff" }, { background: "#333" }],
        })
        .add({
          ...options,
          delay: anime.stagger(100, { grid, from: "center" }),
        })
        .add({
          rotate: () => anime.random(0, 0),
          translateX: () => anime.random(0, 0),
          translateY: () => anime.random(0, 0),
          delay: anime.stagger(100, { grid, from: "center" }),
          keyframes: [
            { background: "#fff" },
            { background: "#333" },
            { background: "#fff" },
            { background: "#333" },
          ],
        });

      let isPause = false;
      container_el.onclick = () => {
        if (isPause) {
          animation.play();
        } else {
          animation.pause();
        }
        isPause = !isPause;
      };
    </script>
  </body>
</html>
